<template>
  <div class="header-container">
    <div class="title">店铺装修</div>
    <div class="center"></div>
    <div class="tools">
      <el-button size="mini" @click="onPreview">
        预览
      </el-button>
      <el-button size="mini" @click="onSave">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { STORE_NAMESPACE } from '../../config'
import { setCache } from '../../common/'
export default {
  name: 'Header',
  computed: {
    ...mapState({
      layouts: state => state[STORE_NAMESPACE].layouts
    })
  },
  methods: {
    onPreview () {
      console.log('预览')
      console.log(JSON.parse(JSON.stringify(this.layouts)))
      const data = JSON.parse(JSON.stringify(this.layouts))
      setCache('decoratePreivewData', data, true)
      window.open(this.$router.resolve('/decorate-preview').href)
    },
    onSave () {
      console.log('保存')
    }
  }
}
</script>

<style scoped lang="less">
.header-container {
  background: #fff;
  height: 40px;
  border-top: 1px solid #f1f1f1;
  border-bottom: 1px solid #f1f1f1;
  padding: 0 20px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 90;
  .title {
    font-weight: bold;
    color: #000;
  }
  .center {
    flex: 1
  }
}
</style>